<template>
  <div id="sceneroutefly11">
    <input id="flyFile" ref="fpffile" type="file" class="file-extras" onchange="" accept=".fpf" style="display: none">
    <el-button-group class="btn-group-extras">
      <el-button type="primary" icon="el-icon-folder-opened" class="btn-extras" @click="selectfile">选择路线</el-button>
      <el-button type="primary" icon="el-icon-video-play" class="btn-extras" @click="start">播放</el-button>
      <el-button type="primary" icon="el-icon-video-pause" class="btn-extras" @click="pause">暂停</el-button>
      <el-button type="primary" icon="kfb-icon-zhongzhi" class="btn-extras stop-extras" @click="stop">停止</el-button>
    </el-button-group>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'Index',
    data: function() {
      return {

      }
    },
    methods: {
      selectfile() {
        this.$refs.fpffile.click()
      },
      start() {
        this.sceneTool.startPlay()
      },
      pause() {
        this.sceneTool.pause()
      },
      stop() {
        this.sceneTool.stop()
      }
    },
    computed: {
      ...mapState({
        sceneViewer(state) {
          return state.eswyzt.sceneViewer
        },
        sceneTool(state) {
          return state.eswyzt.sceneTool
        }
      })
    },
    mounted() {
    }
  }
</script>

<style>

  #sceneroutefly11{
    z-index: 999;
    left: calc(50% - 240px);
    bottom: 40px;
    position: absolute;
  }
  .btn-extras{
    width: 120px;
  }

  .stop-extras{
    height: 40px;
  }

  .file-extras{
    width: 120px;
    float: left;
    height: 40px;
    line-height: 1;
    padding: 12px 20px;
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
    box-sizing: border-box;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
  }
</style>
